<template>
    <div class="card" :style="{width:setWidth,height:setHeight,backgroundColor:bgcolor}">
        <h5 :style="{color:fontcolor}">{{title}}</h5>
        <p :style="{color:fontcolor}" >{{info}}</p>
    </div>
</template>
<script>
export default {
    name:'infoCard',
    /* props:[
       'title',
       'info',
       'setWidth',
       'setHeight',
       'bgcolor'
    ] */
    props:{
        title:{
            required:true
        },
        info:{
            required:true
        },
        setWidth:{
            default:'100px'
        },
        setHeight:{
            default:'100px'
        },
        bgcolor:{
            default:'#409EFF'
        },
        fontcolor:{
            default:'#ffffff'
        }
    }
}
</script>
<style scoped>
 .card{
     box-sizing: border-box;
     border-radius: 20px;
     padding-top: 4px;
     padding-left:8px;
 }
 .card h5{

     font-size: 60%;
     opacity: 0.8;
}
 .card p{

     position: relative;
     background-color: inherit;
     margin-top:6px;
     padding-bottom: 12px;
 }
</style>